<template>
  <div class="module-container">
    <div class="table-container" ref="tableContent" style="height: 100%">
      <div class="select-container">
        <div>
          <slot name="first"></slot>
        </div>
        <div>
          <slot name="second"></slot>
        </div>
      </div>
      <el-table
        :data="data"
        border
        v-loading="loading"
        :show-summary="show_summary"
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
        @selection-change="handleSelectionChange"
        :height="tabHeight"
        ref="table"
      >
        <!-- <template #empty>
          <el-empty description="暂无数据"> </el-empty>
        </template> -->
        <el-table-column type="selection" width="55" v-if="multiSelectShow">
        </el-table-column>
        <template v-for="item in label">
          <el-table-column
            :prop="item.prop"
            :label="item.label"
            :key="item.id"
            :fixed="item.fixed"
            :sortable="item.sortable"
            v-if="item.columnType === 'slot'"
            :width="item.width ? item.width : 'auto'"
          >
            <template slot-scope="scope">
              <!-- 作用是具名插槽 传递数据给父 -->
              <slot :name="item.slotName" :params="scope.row"></slot>
            </template>
          </el-table-column>
          <el-table-column
            :prop="item.prop"
            :label="item.label"
            :fixed="item.fixed"
            :sortable="item.sortable"
            :key="item.prop"
            :width="item.width ? item.width : 'auto'"
            v-else
          >
          </el-table-column>
        </template>
        <el-table-column width="180" label="操作" v-if="buttonShow">
          <template #default="{ row }">
            <el-popconfirm
              style="margin-right: 10px"
              title="确定删除吗？"
              @confirm="deleteRow(row.id)"
            >
              <el-button
                slot="reference"
                type="danger"
                size="large"
                icon="el-icon-delete"
                circle
              ></el-button>
            </el-popconfirm>
            <el-button
              icon="el-icon-edit"
              circle
              type="primary"
              size="large"
              @click="edit(row)"
            ></el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" v-if="linkShow">
          <template #default="{ row }">
            <el-popconfirm
              style="margin-right: 10px"
              title="确定删除吗？"
              @confirm="deleteRow(row.id)"
            >
              <el-link type="primary" slot="reference">删除</el-link>
            </el-popconfirm>
            <el-link
              type="primary"
              :href="'/#/pdf?address=' + row.fileUrl"
              target="blank"
              style="margin-right: 10px"
            >
              查看</el-link
            >
            <el-link
              type="primary"
              :underline="false"
              :href="row.fileUrl"
              :download="row.fileName"
              >下载</el-link
            >
          </template>
        </el-table-column>
        <el-table-column
          width="150"
          label="操作"
          fixed="right"
          v-if="linkShow2"
        >
          <template #default="{ row }">
            <el-popconfirm
              style="margin-right: 10px"
              title="确定删除吗？"
              @confirm="deleteRow(row.id)"
            >
              <el-link type="primary" slot="reference">删除</el-link>
            </el-popconfirm>
            <el-link
              type="primary"
              @click="edit(row)"
              style="margin-right: 10px"
            >
              编辑</el-link
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="paging-container" v-if="pagingShow">
      <el-pagination
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :current-page="paginationConfig.page"
        :page-sizes="[10, 20, 50, 100, 200, 300, 400, 1000]"
        :page-size="paginationConfig.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="paginationConfig.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from "vue";
// // 设置table最大高度
// const setTableHeight = () => {
//   this.$nextTick(() => {
//     if (this.$refs.tableContent) {
//       this.tableHeight = this.$refs.tableContent.offsetHeight;
//     }
//   });
// };

// /** 如果有数据加载再到顶部就用nexttick */
// const scrollBottom = () => {
//   this.$nextTick(() => {
//     if (this.$refs.table) {
//       this.$refs.table.bodyWrapper.scrollTop = 0;
//     }
//   });
// };
{
  props;
}
const edit = (row) => {
  emit("edit", row);
};
const emit = defineEmits(["deleteRow", "changePage", "changeSize", "edit"]);
//删除一个
const deleteRow = (id) => {
  emit("deleteRow", id);
};
// 多选后
const handleSelectionChange = (val) => {
  let list = val.map((i) => {
    return i.id;
  });
  emit("selectionChange", list);
};

// 每页显示条数

const props = defineProps({
  //按钮操作显示
  buttonShow: {
    type: Boolean,
    default: false,
  },
  //链接操作显示
  linkShow: {
    type: Boolean,
    default: false,
  },
  linkShow2: {
    type: Boolean,
    default: false,
  },
  //显示新增
  addShow: {
    type: Boolean,
    default: false,
  },
  //显示搜索
  searchShow: {
    type: Boolean,
    default: false,
  },
  //显示选择
  selectShow: {
    type: Boolean,
    default: false,
  },
  // 加载提示
  loading: {
    type: Boolean,
    default: false,
  },

  // 标题列表
  label: {
    type: Array,
    default: () => [],
  },

  // 分页显示
  pagingShow: {
    type: Boolean,
    default: false,
  },

  // 合计显示
  show_summary: {
    type: Boolean,
    default: false,
  },

  tabHeight: {
    type: String,
    default: "auto",
  },

  // 内容数据项
  data: {
    type: Array,
    default: () => [],
  },

  // 是否显示多选
  multiSelectShow: {
    type: Boolean,
    default: false,
  },

  // 分页数据
  paginationConfig: {
    type: Object,
    default: () => ({}),
  },
});

const handleSizeChange = (val) => {
  emit("changeSize", val);
};

// 翻页
const handleCurrentChange = (val) => {
  emit("changePage", val);
};
</script>
<style lang="scss" scoped>
.select-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  align-items: center;
}
.module-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.table-container {
  flex: 1;
  height: 0;
  overflow: hidden;
}

.paging-container {
  text-align: center;
  margin-top: 15px;
  flex-shrink: 0;
  flex-grow: 0;
}

::v-deep .el-table th.el-table__cell {
  background-color: #fafafa;
}

::v-deep .el-table th.el-table__cell > .cell {
  font-size: 14px;
  color: #333;
  font-weight: normal;
}

::v-deep .el-table__footer-wrapper tbody td.el-table__cell,
.el-table__header-wrapper tbody td.el-table__cell {
  text-align: center;
}
</style>
